<template>
  <div class="container">
    <template>
      <navbar title="手机搜索下单流程" theme="light"></navbar>
      <web class="webview" :src="searchBuyDescUrl" v-if="searchBuyDescUrl" :style="{height: webHeight + 'px'}"></web>
      <div class="footerbar">
        <div class="footerbar-btn share-btn activeable" @click="goSearch" >
          <text class="footerbar-btn-icon icon">&#xe61a;</text>
          <text class="footerbar-btn-text share-btn-text icon"> 去搜索</text>
        </div>
        <div :class="['footerbar-btn', 'buy-btn', 'activeable', !waitFillTradeNo && 'btn-locked']" @click="fillTradeNo">
          <text :class="['icon', 'footerbar-btn-icon', !waitFillTradeNo && 'text-locked']">&#xe633;</text>
          <text :class="['footerbar-btn-text', !waitFillTradeNo && 'text-locked']"> {{waitFillTradeNo ? '填写单号' : '已抢购'}}</text>
        </div>
      </div>
    </template>
    <page-loading :loaded="loaded"></page-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/icon";
  @import "./sass/utilities";
  @import "./sass/activeable";

  .container {
    background-color: $body-bg;
  }

  .webview {
    width: 750px;
  }
  .row {
    flex-direction: row;
    &-num {
      width: 50px;
      font-size: 30px;
      color: $color;
    }
    &-txt {
      font-size: 30px;
      color: $color;
    }
  }

  .btn-locked {
    background-color: #979797;
  }

  .footerbar {
    $height: 96px;
    background-color: #ffffff;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    height: $height;
    box-shadow: 0 0 5px #bfbfbf;
    &-btn {
      flex: 1;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      &-icon {
        font-size: 40px;
        color: #ffffff;
      }
      &-favor {
        flex: 0;
        width: 100px;
        font-size: 60px;
        text-align: center;
        line-height: $height;
        color: $color-muted;
      }
      &-text {
        font-size: 32px;
        line-height: 32px;
        height: 32px;
        color: #ffffff;
      }
      &-price {
        margin-top: 5px;
        font-size: 24px;
        line-height: 24px;
        height: 24px;
        color: #ffffff;
      }
    }
  }

  .share-btn {
    background-color: #ffb745;
  }

  .buy-btn {
    background-color: $brand-primary;
  }
</style>
<script>
let navigator = require('./include/xnavigator')
let queryparser = require('./include/queryparser')
let api = require('./include/api')
var modal = weex.requireModule('modal')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-loading')
  ],
  components: {
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      orderId: 0,
      waitFillTradeNo: false,
      id: 0,
      searchBuyDescUrl: '',
      ecomPlat: '',
      ecomPlatTitle: '',
      urlScheme: ''
    }
  },
  destroyed () {

  },
  created () {
    let cfg = this.$getConfig()
    let param = queryparser(cfg.bundleUrl)
    this.webHeight = (cfg.env.deviceHeight * 750 / cfg.env.deviceWidth - 130 - 96)
    this.id = param.id || ''
    this.loadData().always(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {
      return api.sellerPromotionItem.searchBuy({
        id: this.id
      }).done(rs => {
        // modal.alert({message: JSON.stringify(rs)})
        let data = rs.data
        this.searchBuyDescUrl = data.searchBuyDescUrl
        // modal.alert({message: this.searchBuyDescUrl})
        this.orderId = data.orderId
        this.waitFillTradeNo = data.waitFillTradeNo
        this.ecomPlat = data.ecomPlat
        this.ecomPlatTitle = data.ecomPlatTitle
        this.urlScheme = data.urlScheme
      })
    },
    goSearch () {
      let application = weex.requireModule('application')
      application.openURL(this.urlScheme, (rs) => {
        if (!rs) {
          modal.alert({ message: '对不起，您还没有安装手机' + this.ecomPlatTitle })
        }
      })
    },
    fillTradeNo () {
      if (!this.waitFillTradeNo) {
        return
      }
      modal.prompt({
        message: '请输入订单号',
        duration: 0.3,
        okTitle: '确定',
        cancelTitle: '取消'
      }, value => {
        if (value.result === '确定') {
          api.sellerPromotionItemOrder.fillTradeNo({
            id: this.orderId,
            tradeNo: value.data
          }).done(rs => {
            modal.alert({message: '订单号回填成功，请等待卖家审核！'}, () => {
              navigator.pop()
            })
          })
        }
      })
    }
  }
}
</script>
